<template>
  <view class="kkDialog">
    <u-popup
      :show="show"
      :mode="mode"
      :round="round"
      @close="close"
      :closeable="true"
      :safeAreaInsetBottom="false"
    >
      <view class="popCenter">
        <DialogHeader :title="title" />
        <view v-if="!customerCenter" class="popCenter-content">
          <u-icon
            class="popCenter-content-icon"
            name="close-circle-fill"
            color="red"
            size="20"
            v-if="type === 'delete' && isShowIcon"
          ></u-icon>
          <u-icon
            v-if="type !== 'delete' && isShowIcon"
            class="popCenter-content-icon"
            name="error-circle-fill"
            color="orange"
            size="20"
          ></u-icon>
          <view class="popCenter-content-text"> {{ content }}</view>
        </view>
        <slot></slot>
        <DialogFooter
          :type="type"
          :subTitle="subTitle"
          @cancel="cancel"
          @submit="submit"
        />
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { kkDialogFooterType } from "./enum";

import DialogHeader from "./dialogHeader.vue";
import DialogFooter from "./dialogFooter.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String,
    default: "center",
  },
  round: {
    type: Number,
    default: 8,
  },
  // 标题
  title: {
    type: String,
    default: "",
  },
  //自定义中间区域
  customerCenter: {
    type: Boolean,
    default: false,
  },
  // 中间文本
  content: {
    type: String,
    default: "",
  },
  type: {
    type: Number,
    default: kkDialogFooterType.default,
  },
  subTitle: {
    type: String,
    default: "确定",
  },
});

// 按钮关闭
const close = () => {
  emit("close");
};

const cancel = () => {
  emit("cancel");
};

const submit = () => {
  emit("submit");
};

const emit = defineEmits(["close", "submit", "cancel"]);
</script>

<style lang="scss" scoped>
.kkDialog {
  .popCenter {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 170rpx);
    &-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-left: 30rpx;
      margin-right: 30rpx;
      &-icon {
        margin-right: 20rpx;
      }

      &-text {
        margin-top: -16rpx;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        padding-bottom: 40rpx;
      }
    }
  }
}
</style>
